import { Component, useEffect } from "react";
import { getProListFn,getBannerListFn } from "./api/home";
import { changeProList,changeBannerList } from "./store/modules/home";
import { useDispatch,useSelector } from "react-redux";
export default function Home() {
  //获取修改方法dispatch
  const dispatch = useDispatch()
  
  //获取全局状态的proList
  const proList = useSelector(state => state.home.proList)
  //获取l轮播图
  const bannerList = useSelector(state => state.home.bannerList)
  //useEffect会在挂载阶段，更新阶段，卸载阶段执行
useEffect(() =>{
  getProListFn().then(res => {
    // console.log(res)
    //将数据放入全局状态
    dispatch(changeProList(res.data.data))
  })
  //发数据请求
  getBannerListFn().then(res => {
    // console.log(res)
    //将数据放入全局状态
    dispatch(changeBannerList(res.data.data))
  })


},[])


  return (
    <div>
      <h1>Home</h1>
      <ul>
        {proList && proList.map(item =>{
          return <li key={item.proid}>{item.proname}</li>
        })}
      </ul>

      <hr />
      <ol>
        {bannerList && bannerList.map(item =>{
          return <li key={item.bannerid}>
            <img src={item.img} alt="" style={{width:"350px"}}/>
          </li>
        })}
      </ol>
    </div>
  );
}